<template>
  <div class="login" id="exit">
    <svg-icon
      icon-class="logo@1x"
      widthW="1.733rem"
      heightH="1.733rem"
      class="logo-icon-style"
    ></svg-icon>
    <p class="logo-text-style">智慧社区</p>
    <div class="login-content-style">
      <van-tabs v-model="loginModeActive" color="#DC4630" @click="tabsChange">
        <van-tab title="密码登录" name="pwd">
          <van-cell-group class="login-input-style">
            <van-field
              v-model.trim="username"
              type="number"
              clearable
              placeholder="请输入手机号或者身份证号"
            />
            <van-field
              v-model="password"
              type="password"
              clearable
              placeholder="请输入密码"
            />
            <van-cell style="padding:0 16px;"/>
          </van-cell-group>
        </van-tab>
        <van-tab title="验证码登录" name="code">
          <van-cell-group class="login-input-style">
            <van-field
              v-model.trim="phoneNumber"
              type="number"
              clearable
              placeholder="请输入手机号"
            >
              <van-button
                slot="button"
                size="small"
                color="#DC4630"
                plain
                round
                @click="getVerificationCode"
                :disabled="codeDisabled"
                >{{ buttonText }}</van-button
              >
            </van-field>
            <van-field
              v-model="verificationCode"
              clearable
              placeholder="请输入短信验证码"
            />
            <van-cell style="padding:0 16px;"/>
          </van-cell-group>
        </van-tab>
      </van-tabs>
      <van-button
        class="login-btn-style"
        @click="login"
        size="large"
        type="primary"
        color="#DC4630"
        round
        :disabled="isDisabled"
        :loading="isLoading"
        :loading-text="loadingText"
        >登录</van-button
      >
      <div class="login-set-style" v-show="loginModeActive === 'pwd'">
        <van-checkbox
          v-model="rememberLoginStatus"
          shape="square"
          checked-color="#DC4630"
          :disabled="isDisabled"
          >记住登录状态</van-checkbox
        >
        <span @click="$router.push('/remember')">忘记密码?</span>
      </div>
      <div class="login-register-span">
        <span @click="$router.push('/register')">没有账号？立即注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/controller/Interface.js";
import md5 from "js-md5";
import util from "@/controller/Common/util.js";
import constant from "@/controller/constant.js";
import bus from "../../utils/eventBus";
export default {
  name: "Login",
  data() {
    return {
      loginModeActive: "pwd",
      username: "",
      password: "",
      phoneNumber: "",
      verificationCode: "",
      rememberLoginStatus: true,
      isLoading: false,
      loadingText: "登录",
      buttonText: "获取验证码",
      codeDisabled: false,
      time: 60
    };
  },
  computed: {
    isDisabled() {
      return (
        (this.username === "" || this.password === "") &&
        (this.phoneNumber === "" || this.verificationCode === "")
      );
    }
  },
  created() {},
  mounted() {
    if (localStorage.getItem("idcardNo")) {
      this.username = Number(localStorage.getItem("idcardNo"));
    }
    if (localStorage.getItem("username")) {
      this.username = Number(localStorage.getItem("username"));
      this.phoneNumber = Number(localStorage.getItem("username"));
    }
    if (localStorage.getItem("password")) {
      this.password = localStorage.getItem("password");
    }
  },
  methods: {
    getVerificationCode() {
      if (!util.validatePhoneNum(this.phoneNumber)) {
        this.$toast("请输入合法手机号");
        return;
      }
      this.time = 60;
      this.timer();
      api
        .user_v1_msg_code(this.phoneNumber)
        .then(res => {
          if (res.code === "0") {
            this.$toast('验证码发送成功！');
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
            this.time = 0;
            this.buttonText = "获取验证码";
            this.codeDisabled = false;
          }
        })
        .catch(() => {
          this.$toast("网络连接失败");
          this.time = 0;
          this.buttonText = "获取验证码";
          this.codeDisabled = false;
        });
    },
    //发送手机验证码倒计时
    timer() {
      if (this.time > 0) {
        this.codeDisabled = true;
        this.time--;
        this.buttonText = this.time + "秒";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.buttonText = "获取验证码";
        this.codeDisabled = false;
      }
    },
    // 密码登录
    pwdLogin() {
      if (!util.validatePhoneNum(this.username) && !util.validateIdCardNumber(this.username)) {
        this.$toast("请输入合法手机号或身份证号");
        return;
      }
      this.isLoading = true;
      this.loadingText = "登录中...";
      const data = {
        password: md5(this.password),
        phone: this.username
      };
      api
        .security_v1_login(data)
        .then(res => {
          if (res.code === "0") {
            localStorage.setItem("userInfo", JSON.stringify(res.datas));
            localStorage.setItem("username", this.username + "");
            localStorage.setItem("password", this.password + "");
            bus.$emit("login");
            this.$router.push({ name: "home" });
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {
          this.$toast(constant.netErrMsg);
        })
        .then(() => {
          this.isLoading = false;
          this.loadingText = "登录";
        });
    },
    // 验证码登录
    codeLogin() {
      if (!util.validatePhoneNum(this.phoneNumber)) {
        this.$toast("请输入合法手机号");
        return;
      }
      this.isLoading = true;
      this.loadingText = "登录中...";
      const data = {
        code: this.verificationCode,
        phone: this.phoneNumber
      };
      api
        .security_v1_msgLogin(data)
        .then(res => {
          if (res.code === "0") {
            localStorage.setItem("userInfo", JSON.stringify(res.datas));
            bus.$emit("login");
            this.$router.push({ name: "home" });
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {
          this.$toast(constant.netErrMsg);
        })
        .then(() => {
          this.isLoading = false;
          this.loadingText = "登录";
          this.time = 0;
          this.buttonText = "获取验证码";
          this.codeDisabled = false;
        });
    },
    // 登录
    login() {
      if (this.loginModeActive === "pwd") {
        this.pwdLogin();
      } else {
        this.codeLogin();
      }
    },
    tabsChange() {}
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f7fa;

  /deep/ .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
    border: none;
  }

  /deep/ .van-hairline--top-bottom {
    position: inherit;
  }
  /deep/ .van-cell::after {
    content: '';
    border-bottom: 1px solid #ebedf0;
  }
  // /deep/ .van-cell:last-child::after {
  //   border-bottom: 1px solid #ebedf0;
  // }
  .logo-icon-style {
    margin-top: 64px;
  }
  .logo-text-style {
    margin: 10.5px 0 19px 0;
    font-size: 16px;
    color: #333333;
  }
  .login-content-style {
    width: 315px;
    height: 365px;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 15px;
    .login-input-style {
      margin-top: 36px;
    }
    .login-btn-style {
      margin-top: 74.5px;
    }
    .login-set-style {
      color: #323233;
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .login-register-span {
      text-align: center;
      color: #0000ff;
      padding: 8px 0;
    }
  }
}
</style>
